
import {$} from "../util/seq.js";
import {whenEnabled} from "./util.js";
import {navigate} from "../engine/layers.js";

//     <div id="nav-arrows" class="bunch">
//
//         <button data-name="nav-prev2" aria-labelledby="nav-prev2-tt">
//             <svg class="fa flip-x-when-rtl">
//                 <use xlink:href="#fa-angle-double-left"></use>
//             </svg>
//             <span id="nav-prev2-tt" role="tooltip"></span>
//         </button>
//
//         <button data-name="nav-prev1" aria-labelledby="nav-prev1-tt">
//             <svg class="fa flip-x-when-rtl">
//                 <use xlink:href="#fa-angle-left"></use>
//             </svg>
//             <span id="nav-prev1-tt" role="tooltip"></span>
//         </button>
//
//         <button data-name="nav-next1" aria-labelledby="nav-next1-tt">
//             <svg class="fa flip-x-when-ltr">
//                 <use xlink:href="#fa-angle-left"></use>
//             </svg>
//             <span id="nav-next1-tt" role="tooltip"></span>
//         </button>
//
//         <button data-name="nav-next2" aria-labelledby="nav-next2-tt">
//             <svg class="fa flip-x-when-ltr">
//                 <use xlink:href="#fa-angle-double-left"></use>
//             </svg>
//             <span id="nav-next2-tt" role="tooltip"></span>
//         </button>
//
//     </div>


/**
 * @param container
 * @param {Handle} time_cursor
 * @param layerAgent
 */
export function defineTimeNav(container, time_cursor, layerAgent) {

    const ops = ["prev2", "prev1", "next1", "next2"];

    function updateStore(op) {
        navigate(layerAgent.value(), op);
    }

    ops.forEach(op => {
        const button = container.selectAll(`[data-name=nav-${op}]`);
        const content = button.selectAll("[role=tooltip]");

        button.on($`click`, whenEnabled(() => updateStore(op)));
        layerAgent.on($`update`, layer => content.text(layer?.navLabels?.[op] ?? ""));
    });

}
